<template>
	<uni-popup ref="popup">
		<view class="input-wrap br" v-if="showCode">
			<uni-easyinput v-model="schoolName" placeholder="请输入学校名称" />
			<view class="require-btn" @click="generateQrcode">确定</view>
		</view>
		<view class="code-wrap br" v-else>
			<Qrcode  
				cid="qrcode1" 
				ref="qrcode" 
				:val="val" 
				:size="size" 
				:unit="unit"
				:background="background" 
				:foreground="foreground" 
				:pdground="pdground" 
				:icon="icon"
				:iconSize="iconsize" 
				:lv="lv" 
				:onval="onval" 
				:loadMake="loadMake" 
				:usingComponents="true"
				@result="getLink" 
			/>
			<view class="tip">长按保存图片</view>
		</view>
	</uni-popup>
</template>

<script>
	import Qrcode from '@/libs/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components:{
			Qrcode
		},
		data(){
			return {
				showCode: true,
				schoolName: undefined,
				val: '二维码', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#fff', // 背景色
				foreground: '#f95249', // 前景色
				pdground: '#f95249', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' ,// 二维码生成后的图片地址或base64
				userInfo:{},
				type:"",
				resultLink: ''
			}
		},
		methods:{
			generateQrcode(){
				this.val = `https://www.baidu.com/s?wd=${this.schoolName}`
				this.showCode = false
			},
			getLink(val){
				this.resultLink = val
			},
			open(){
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-easyinput__content){
		width: 400rpx;
	}
	.code-wrap,
	.input-wrap{
		padding: 48rpx;
		text-align: center;
		.tip{
			margin-top: 24rpx;
			color: #999;
		}
	}
	.require-btn{
		color: #fff;
		padding: 12rpx;
		border-radius: 8rpx;
		margin-top: 40rpx;
		background-color: #f95249;
	}
</style>